<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Element Plus 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- 引入 Vue 3 和 ECharts -->
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <!-- 引入 Axios -->
    <script type="text/javascript" src="/js/axios.js"></script>
    <script src="/js/axios-helper.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <h1>学生管理</h1>
        </el-header>
        <el-main>
            <!-- 创建按钮 -->
            <el-button type="primary" @click="openCreateDialog">创建学生</el-button>
            <el-table :data="students" style="width: 100%">
                <el-table-column prop="id" label="学生ID" width="180"></el-table-column>
                <el-table-column prop="name" label="学生姓名" width="180"></el-table-column>
                <el-table-column prop="score" label="学生分数" width="180"></el-table-column>
                <el-table-column prop="info" label="学生信息" width="180"></el-table-column>
                <!-- 操作列 -->
                <el-table-column label="操作" width="180">
                    <template v-slot="scope">
                        <el-button type="primary" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="deleteStudent(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>

    <!-- 分页 -->
    <div class="demo-pagination-block">
        <el-pagination
                v-model:current-page="params.pageNumber"
                v-model:page-size="params.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="params.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </div>

    <!-- 创建对话框 -->
    <el-dialog title="创建学生" v-model="createDialogVisible">
        <el-form :model="createForm" ref="createFormRef">
            <el-form-item label="学生姓名" prop="name" :rules="[{ required: true, message: '请输入学生姓名', trigger: 'blur' }]">
                <el-input v-model="createForm.name"></el-input>
            </el-form-item>
            <el-form-item label="学生分数" prop="score" :rules="[{ required: true, message: '请输入学生分数', trigger: 'blur' }]">
                <el-input v-model.number="createForm.score" type="number"></el-input>
            </el-form-item>
            <el-form-item label="学生信息" prop="info">
                <el-input v-model="createForm.info"></el-input>
            </el-form-item>
            <span class="dialog-footer" slot="footer">
                <el-button @click="createDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitCreateForm">确 定</el-button>
            </span>
        </el-form>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑学生" v-model="editDialogVisible">
        <el-form :model="editForm" ref="editFormRef">
            <el-form-item label="学生姓名" prop="name" :rules="[{ required: true, message: '请输入学生姓名', trigger: 'blur' }]">
                <el-input v-model="editForm.name"></el-input>
            </el-form-item>
            <el-form-item label="学生分数" prop="score" :rules="[{ required: true, message: '请输入学生分数', trigger: 'blur' }]">
                <el-input v-model.number="editForm.score" type="number"></el-input>
            </el-form-item>
            <el-form-item label="学生信息" prop="info">
                <el-input v-model="editForm.info"></el-input>
            </el-form-item>
            <span class="dialog-footer" slot="footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEditForm">确 定</el-button>
            </span>
        </el-form>
    </el-dialog>
</div>

<script>
    const { createApp, ref, reactive, watchEffect } = Vue;
    const { ElMessageBox, ElMessage } = ElementPlus;

    createApp({
        setup() {
            const students = ref([]);   // 学生数据
            const params = ref({
                pageNumber: 1,  // 当前页
                pageSize: 10,   // 每页显示条数
                total: 0        // 总条目数
            });

            // 创建和编辑对话框可见性
            const createDialogVisible = ref(false);
            const editDialogVisible = ref(false);
            const createForm = ref({ name: '', score: null, info: '' }); // 创建表单数据
            const editForm = ref({ id: null, name: '', score: null, info: '' }); // 编辑表单数据

            // 获取分页数据
            const fetchData = () => {
                axios.get(`/students/pages?currentPage=${params.value.pageNumber}&pageSize=${params.value.pageSize}`)
                    .then(response => {
                        students.value = response.data.records;  // 假设后端返回的数据在 data.records 中
                        params.value.total = response.data.total;  // 假设返回的总条目数在 total 字段中
                    })
                    .catch(error => {
                        console.error("获取数据失败:", error);
                    });
            };

            // 监控页码和页大小的变化，并重新获取数据
            watchEffect(() => {
                fetchData();
            });

            // 打开创建对话框
            const openCreateDialog = () => {
                createForm.value = { name: '', score: null, info: '' }; // 重置表单
                createDialogVisible.value = true;
            };

            // 打开编辑对话框
            const openEditDialog = (student) => {
                editForm.value = { ...student }; // 填充表单数据
                editDialogVisible.value = true;
            };

            // 提交创建表单
            const submitCreateForm = () => {
                axios.post('/students/add', createForm.value)
                    .then(response => {
                        console.log('创建成功:', response);
                        createDialogVisible.value = false; // 关闭对话框
                        fetchData(); // 重新获取数据
                        ElMessage({ type: "success", message: "学生添加成功", showClose: true });
                    })
                    .catch(errorMsg => {
                        ElMessage({ type: "error", message: errorMsg.message || errorMsg, showClose: true });
                    });
            };

            // 提交编辑表单
            const submitEditForm = () => {
                axios.put(`/students/edit`, editForm.value) // 编辑请求
                    .then(response => {
                        console.log('编辑成功:', response);
                        editDialogVisible.value = false; // 关闭对话框
                        fetchData(); // 重新获取数据
                        ElMessage({ type: "success", message: "学生信息更新成功", showClose: true });
                    })
                    .catch(errorMsg => {
                        ElMessage({ type: "error", message: errorMsg.message || errorMsg, showClose: true });
                    });
            };

            // 删除学生
            const deleteStudent = (row) => {
                ElMessageBox.confirm(`确认删除学生 - ${row.name} - 的信息吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    axios.get(`/students/deleteById`, { params: { id: row.id } })
                        .then(result => {
                            ElMessage({ type: "success", message: "信息删除成功", showClose: true });
                            fetchData(); // 删除成功后重新获取数据
                        })
                        .catch(errorMsg => {
                            ElMessage({ type: "error", message: errorMsg.message || errorMsg, showClose: true });
                        });
                }).catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消删除',
                    });
                });
            };

            // 页码变化时触发
            const handleCurrentChange = (page) => {
                params.value.pageNumber = page;
            };

            // 每页显示条数变化时触发
            const handleSizeChange = (size) => {
                params.value.pageSize = size;
                params.value.pageNumber = 1; // 当修改每页显示条数时，重置页码为第一页
            };

            return {
                students,
                params,
                createDialogVisible,
                editDialogVisible,
                createForm,
                editForm,
                handleCurrentChange,
                handleSizeChange,
                openCreateDialog,
                openEditDialog,
                submitCreateForm,
                submitEditForm,
                deleteStudent
            };
        }
    }).use(ElementPlus).mount('#app');
</script>
</body>
</html>
